<script lang="ts">
import { defineComponent, ref } from "vue"
import { routes } from "@/router/index";

export default defineComponent({
    setup() {
        const active = ref("index");
        const tabbar = ref(routes[1].children?.filter((item, index) => index < 5));
        return {
            tabbar,
            active
        }
    }
})
</script>

<template>
    <van-tabbar v-model="active" :safe-area-inset-bottom="true" :route="true" :placeholder="true"
        active-color="rgba(50, 67, 123, 1)" inactive-color="rgba(31, 33, 32, 1)">
        <van-tabbar-item v-for="item in tabbar" :to="item.path" :key="item.name">
            <span>{{ $t(item.meta.title) }}</span>
            <template #icon="props">
                <img :src="props.active ? item.meta.active : item.meta.inactive" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<style lang="less" scoped>
.van-tabbar__placeholder {
    text-align: center;

    &:deep(.van-tabbar) {
        box-shadow: 0px 5px 10px 0px rgba(19, 124, 231, 0.08);
        border-radius: 15px 15px 0px 0px;
        overflow: hidden;
    }
}
</style>
